.hero {
  .mix-flex-x-center();
}

.hero image, .hero video {
  height: 38.2vh;
}

.hero.white {
  background: #ffffff;
}

.hero.small .header {
  font-size: 56rpx;
  margin-bottom: 48rpx
}

.hero.small .sub-header {
  font-size: 24rpx;
}

.hero .content {
  padding-top: 10%;
  text-align: center;
}

.hero .content.centered {
  text-align: center;
}

.hero .sub-header {
  font-size: 32rpx;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.85);
}

.hero .header {
  font-size: 72rpx;
  font-weight: bold;
  margin: 0 12% 8px;
}

.hero .description {
  padding: 0 12%;
  margin-bottom: 32px;
}